import React, { Component } from 'react';
import { StyleSheet, NativeEventEmitter, NativeModules, TouchableOpacity, Image, ImageBackground, FlatList, Linking } from 'react-native';
import { Container, Content, Icon, Button, Text, View, } from 'native-base';
import { ListItem, Avatar } from 'react-native-elements';
import { connect } from 'react-redux';

import { Loading, ScrollVertical } from '../component';
import { Colors, Metrics } from '../theme';
import Swiper from 'react-native-swiper';
import Http from '../utils/HttpPost';

const initParams = {
  'debug': true,
  'appKey': '极光官网分配的appKey', //仅OS
  'channel': 'channel',                 //仅OS
  //'advertisingId': 'advertisingId',     //仅OS
  'isProduction': false,                //仅OS
};

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bannerList: [
        {
          image_url: 'https://img.alicdn.com/imgextra/i1/2053469401/O1CN018h6lQJ2JJi0jsrBY0_!!2053469401.jpg',
          url_type: 'url',
          click_url: 'https://lingyouhui.vip'
        }
      ],
      noticeList: [{ content: '拾柴聚火全新升级，全新上线！' },],
      hostOptionsList: [
        { key: 0, name: "发明创新", route: 'Myteam', icon: require('../asserts/images/home/icon_daren.png') },
        { key: 1, name: "拾柴聚合", route: 'Myteam', icon: require('../asserts/images/home/icon_jiazu.png') },
        //  { key: 3, name: "我的城市", route: 'MyCity', icon: require('../asserts/images/home/icon_chengshi.png') },
        //  { key: 3, name: "城主竞拍", route: 'CityAuction', icon: require('../asserts/images/home/icon_jingpai.png') },
        { key: 3, name: "邀请好友", route: 'InviteFriends', icon: require('../asserts/images/home/icon_yaoqing.png') },
        { key: 4, name: "新手指南", route: 'CourseTask', icon: require('../asserts/images/home/icon_zhinan.png') },
      ],
      noticeIndex: 0,
      isLoading: false,
      taskList: [
        {
          headPortrait: '',
        },
      ],
      params: '',
      dynpParams: ''
    }
  }

  UNSAFE_componentWillMount() {

  }

  componentDidMount() {

  }
  // banner打开
  openBannerViewFunc(type, uri) {
    if (type == 'router') {
      this.props.navigation.push(uri);
    } else if (type == 'url') {
      Linking.openURL(uri)
    }
  }

  // 打开公告详情
  navigationNoticeDetail() {
    this.props.navigation.push('Message');
  }

  componentWillUnmount() {

  }

  render() {
    return (
      <Container>
        <Loading showLoading={this.state.isLoading} />
        <Content>
          {/* banner  */}
          {this.state.bannerList.length ?
            <View style={Styles.bannerCont}>
              <Swiper autoplay
                dot={<View style={{ backgroundColor: 'rgba(0,0,0,.2)', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                activeDot={<View style={{ backgroundColor: Colors.subject, width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                paginationStyle={{
                  bottom: 10, left: null, right: 15
                }}
              >
                {this.state.bannerList.map((info, key) => {
                  return (
                    <TouchableOpacity style={Styles.slide} key={key} onPress={() => this.openBannerViewFunc(info.url_type, info.click_url)}>
                      <Image resizeMode='stretch' style={Styles.bannerImg} source={{ uri: info.image_url }} />
                    </TouchableOpacity>
                  );
                })}
              </Swiper>
            </View>
            :
            <View></View>
          }

          {/* 公告 */}
          <View style={{ padding: 10, paddingBottom: 0, backgroundColor: '#FFFFFF', flexDirection: 'row', }}>
            <TouchableOpacity onPress={() => {
              this.navigationNoticeDetail()
            }} style={{ flexDirection: 'row', backgroundColor: "#FFFFFF", alignItems: 'center', borderRadius: 8, paddingLeft: 5, paddingRight: 5, flex: 1 }}>
              <Icon type="FontAwesome" name='volume-up' style={[Styles.noticeIcons, { marginRight: 18 }]} />
              <View style={{ flexDirection: 'row', flex: 1, }}>
                <ScrollVertical
                  onChange={(index => {
                    this.setState({ noticeIndex: index });
                  })}
                  enableAnimation={true}
                  data={this.state.noticeList}
                  delay={2500}
                  duration={1000}
                  scrollHeight={34}
                  scrollStyle={{ alignItems: 'flex-start' }}
                  textStyle={{ color: '#333', fontSize: 14 }} />
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {
              this.props.navigation.push('Notice')
            }} style={{ paddingLeft: 10, marginTop: 2 }}>
              <Icon type="FontAwesome" name='angle-right' style={Styles.noticeIcons} />
            </TouchableOpacity>
          </View>
          {/* 热点功能 */}
          <View>
            <View style={Styles.barBody}>
              {
                this.state.hostOptionsList.map(item => {
                  let { key, name, route, icon } = item;
                  return (
                    <TouchableOpacity key={key} onPress={() => this.props.navigation.navigate(route)}>
                      <View style={Styles.barBodyItem}>
                        <View>
                          <Image source={icon} style={Styles.barImage} />
                        </View>
                        <Text style={Styles.barText}>{name}</Text>
                      </View>
                    </TouchableOpacity>
                  )
                })
              }
            </View>
          </View>
          {/* 推荐列表 */}
          <View style={Styles.barHeader}>
            <Icon name='bonfire' style={[Styles.noticeIcons]} />
            <Text style={Styles.barTitle}>推荐</Text>
          </View>

          {/* <Button title="getRegisterID"
            onPress={() => JPush.getRegistrationID(result =>
              console.log("registerID:" + JSON.stringify(result))
            )} />

          <Text> 获取到的参数: {this.state.params}</Text>       
          <Text > 无码邀请参数: {this.state.dynpParams} </Text> */}
          <View>

            <View style={Styles.taskListCard}>
              <View style={Styles.taskListCardLeft}>
                <Avatar
                  rounded
                  title="火"
                  size="medium"
                  source={{
                    uri:
                      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595399149567&di=4901443fb97baf196faf3e67e05492fe&imgtype=0&src=http%3A%2F%2Fi2.bbs.fd.zol-img.com.cn%2Ft_s800x5000%2Fg4%2FM03%2F0F%2F07%2FCg-4WlHKfYKIHSFqABQZ8LT39egAAJ9HQAAAAAAFBoI362.jpg',
                  }}
                />
                <View style={{ marginLeft: 8 }}>
                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.itemTitText}> 简单下载注册 </Text>
                    <Icon type="FontAwesome" name='android' style={Styles.platformIcon} />
                    <Icon type="FontAwesome" name='apple' style={Styles.platformIcon} />
                  </View>

                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.label}> 认证绑卡 </Text>
                    <Text style={Styles.label}> 天天有鱼 </Text>
                  </View>

                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.yizhuanText}> 18人已赚 </Text>
                    <Text style={Styles.yizhuanText}> 剩余22个 </Text>
                  </View>
                </View>
              </View>
              <View style={Styles.taskListCardRight}>
                <Text style={Styles.shangjinText}>
                  + 1.2
              </Text>
                <Text style={Styles.shenglueText}>
                  ...
              </Text>
              </View>
            </View>


            <View style={Styles.taskListCard}>
              <View style={Styles.taskListCardLeft}>
                <Avatar
                  rounded
                  title="火"
                  size="medium"
                  source={{
                    uri:
                      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2939883464,3088670952&fm=26&gp=0.jpg',
                  }}
                />
                <View style={{ marginLeft: 8 }}>
                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.itemTitText}> 一秒拿钱！！！ </Text>
                    <Icon type="FontAwesome" name='android' style={Styles.platformIcon} />
                    <Icon type="FontAwesome" name='apple' style={Styles.platformIcon} />
                  </View>

                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.label}> 认证绑卡 </Text>
                    <Text style={Styles.label}> 3D </Text>
                  </View>

                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.yizhuanText}> 18人已赚 </Text>
                    <Text style={Styles.yizhuanText}> 剩余22个 </Text>
                  </View>
                </View>
              </View>
              <View style={Styles.taskListCardRight}>
                <Text style={Styles.shangjinText}>
                  + 1.2
              </Text>
                <Text style={Styles.shenglueText}>
                  ...
              </Text>
              </View>
            </View>



            <View style={Styles.taskListCard}>
              <View style={Styles.taskListCardLeft}>
                <Avatar
                  rounded
                  title="火"
                  size="medium"
                  source={{
                    uri:
                      'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=194476109,2206237446&fm=26&gp=0.jpg',
                  }}
                />
                <View style={{ marginLeft: 8 }}>
                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.itemTitText}> 关注公众号，秒赚5元 </Text>
                    <Icon type="FontAwesome" name='android' style={Styles.platformIcon} />
                    <Icon type="FontAwesome" name='apple' style={Styles.platformIcon} />
                  </View>

                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.label}> 其他任务 </Text>
                    <Text style={Styles.label}> 兼职赚 </Text>
                  </View>

                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.yizhuanText}> 12人已赚 </Text>
                    <Text style={Styles.yizhuanText}> 剩余882个 </Text>
                  </View>
                </View>
              </View>
              <View style={Styles.taskListCardRight}>
                <Text style={Styles.shangjinText}>
                  + 9.2
              </Text>
                <Text style={Styles.shenglueText}>
                  ...
              </Text>
              </View>
            </View>



            <View style={Styles.taskListCard}>
              <View style={Styles.taskListCardLeft}>
                <Avatar
                  rounded
                  title="火"
                  size="medium"
                  source={{
                    uri:
                      'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1864133301,2695639473&fm=26&gp=0.jpg',
                  }}
                />
                <View style={{ marginLeft: 8 }}>
                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.itemTitText}> 无需实名，快速通过 </Text>
                    <Icon type="FontAwesome" name='android' style={Styles.platformIcon} />
                    <Icon type="FontAwesome" name='apple' style={Styles.platformIcon} />
                  </View>

                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.label}> 认证绑卡 </Text>
                    <Text style={Styles.label}> 秘乐视频 </Text>
                  </View>

                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.yizhuanText}> 30人已赚 </Text>
                    <Text style={Styles.yizhuanText}> 剩余20个 </Text>
                  </View>
                </View>
              </View>
              <View style={Styles.taskListCardRight}>
                <Text style={Styles.shangjinText}>
                  + 10.2
              </Text>
                <Text style={Styles.shenglueText}>
                  ...
              </Text>
              </View>
            </View>



            <View style={Styles.taskListCard}>
              <View style={Styles.taskListCardLeft}>
                <Avatar
                  rounded
                  title="火"
                  size="medium"
                  source={{
                    uri:
                      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596118586410&di=c2828d8304c29b492c250527533742a0&imgtype=0&src=http%3A%2F%2Ftupian.qqw21.com%2Farticle%2FUploadPic%2F2020-6%2F2020617225141628.jpg',
                  }}
                />
                <View style={{ marginLeft: 8 }}>
                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.itemTitText}> 淘宝零元购物 ❤ 秒杀 </Text>
                    <Icon type="FontAwesome" name='android' style={Styles.platformIcon} />
                    <Icon type="FontAwesome" name='apple' style={Styles.platformIcon} />
                  </View>

                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.label}> 注册 </Text>
                    <Text style={Styles.label}> 淘宝 </Text>
                  </View>

                  <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                    <Text style={Styles.yizhuanText}> 181人已赚 </Text>
                    <Text style={Styles.yizhuanText}> 剩余99个 </Text>
                  </View>
                </View>
              </View>
              <View style={Styles.taskListCardRight}>
                <Text style={Styles.shangjinText}>
                  + 1.2
              </Text>
                <Text style={Styles.shenglueText}>
                  ...
              </Text>
              </View>
            </View>




          </View>


        </Content>
      </Container>
    );
  }

}

const mapStateToProps = state => ({
  logged: state.user.logged,
  token: state.user.token,

});

const mapDispatchToProps = dispatch => ({

});

export default connect(mapStateToProps, mapDispatchToProps)(Home);

const Styles = StyleSheet.create({
  // banner
  bannerCont: {
    width: Metrics.width,
    height: Metrics.width * 0.5,
    borderRadius: 0,
    overflow: "hidden"
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },
  bannerImg: {
    flex: 1
  },
  textAligns: {
    textAlign: 'center',
    margin: 8
  },
  // noitce
  noticeIcons: {
    fontSize: 24,
    color: Colors.subject
  },
  // hostbar
  barHeader: { flexDirection: 'row', padding: 15 },
  barTitle: { fontSize: 16, color: Colors.C10, marginLeft: 8 },
  barBody: { flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', marginTop: 10, marginBottom: 10 },
  barBodyItem: { justifyContent: 'center', alignItems: 'center' },
  barImage: { width: 38, height: 38 },
  barText: { marginTop: 6, color: Colors.hui33, fontSize: 12, },
  taskListCard: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 8,
    marginLeft: 10,
    marginRight: 10,
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: Colors.huiF0,
  },
  taskListCardLeft: {
    flexDirection: 'row',
  },
  taskListCardRight: {
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  platformIcon: {
    marginLeft: Metrics.mainMagin,
    fontSize: Metrics.fontSize14,
    color: Colors.subject,
  },
  itemTitText: {
    fontSize: Metrics.fontSize14,
  },
  label: {
    paddingLeft: 6,
    paddingRight: 6,
    lineHeight: 20,
    borderRadius: 10,
    fontSize: 12,
    marginRight: 6,
    backgroundColor: Colors.huiF0,
    color: Colors.hui99
  },
  yizhuanText: {
    fontSize: 12,
    color: Colors.hui99,
  },
  shangjinText: {
    color: Colors.subject,
    textAlign: 'right'
  },
  shenglueText: {
    color: Colors.huiF0,
    textAlign: 'right'
  },
});